import React from 'react';
import type { Tab } from '../types';

interface TabItemProps {
  tab: Tab;
  isActive: boolean;
  onClick: () => void;
  onDelete: () => void;
  onDoubleClick: () => void;
  isDefault?: boolean;
}

const TabItem: React.FC<TabItemProps> = ({ tab, isActive, onClick, onDelete, onDoubleClick, isDefault = false }) => {
  return (
    <div
      className={`tab-item ${isActive ? 'active' : ''}`}
      onClick={onClick}
      onDoubleClick={onDoubleClick}
    >
      <span style={{ flexGrow: 1 }}>{tab.name}</span>
      {!isDefault && (
        <div
          onClick={(e) => {
            e.stopPropagation();
            window.confirm('确定删除吗？') && onDelete();
          }}
          className='tab-close'
        >
          x
        </div>
      )}
    </div>
  );
};

export default TabItem;